<template>
  <!-- 根据传入的值，判断 star 的样式 -->
  <div class="star" :class="starType">
    <span
      v-for="(starClass, index) in starClasses"
      :class="starClass"
      class="star-item"
      :key="index"
    ></span>
  </div>
</template>
<script>
// 定义常量：星星的个数 LENGTH ，整颗星的样式 ON ，半颗星的样式 Half ，没有星的样式 OFF
const LENGTH = 5;
const CLASS_ON = "on";
const CLASS_HALF = "half";
const CLASS_OFF = "off";
export default {
  name: "Star",
  // 使用该组件，需要传入 star 的大小 和 分数 score
  props: {
    size: Number,
    score: Number,
  },
  /**
   * 定义两个计算属性：
   *  第一个：用来判断 star 需要使用的样式大小
   *  第二个：利用传递过来的分数，判断所要展示 star 的样式，是 on 还是 half 还是 off
   */
  computed: {
    starType() {
      return "star-" + this.size;
    },
    starClasses() {
      // 定义一个数组
      let result = [];
      // 如果分数的小数大于 .5 就显示一颗星，小于 .5 就显示半颗星
      const score = Math.floor(this.score * 2) / 2;
      // 定义一个常量来判断是否有半颗星，如果对 1 取余不是 0 ，那么是小数，就有半颗星
      const hasHalf = score % 1 !== 0;
      // 定义一个常量，将分数向下取整，去掉 .5 小数
      const hasIntager = Math.floor(score);
      // 先将整颗星 push 进数组
      for (let i = 0; i < hasIntager; i++) {
        result.push(CLASS_ON);
      }
      // 再判断是否有半颗星，有的话 push 半颗星进去
      if (hasHalf) {
        result.push(CLASS_HALF);
      }
      // 如果不够要展示的星星个数，说明还有暗的星星，push 暗的样式进去
      while (result.length < LENGTH) {
        result.push(CLASS_OFF);
      }
      return result;
    },
  },
};
</script>
<style lang="stylus" scoped>
@import '~assets/stylus/mixin.styl'
.star
  display flex
  align-items center
  justify-content center
  .star-item
    background-repeat no-repeat
  &.star-48
    .star-item
      width 20px
      height 20px
      margin-right 22px
      background-size 20px 20px
      &:last-child
        margin-right 0
      &.on
        bg-image('./icon/star48_on')
      &.half
        bg-image('./icon/star48_half')
      &.off
        bg-image('./icon/star48_off')
  &.star-36
    .star-item
      width 15px
      height 15px
      margin-right 6px
      background-size 15px 15px
      &:last-child
        margin-right 0
      &.on
        bg-image('./icon/star36_on')
      &.half
        bg-image('./icon/star36_half')
      &.off
        bg-image('./icon/star36_off')
  &.star-24
    .star-item
      width 10px
      height 10px
      margin-right 3px
      background-size 10px 10px
      &:last-child
        margin-right 0
      &.on
        bg-image('./icon/star24_on')
      &.half
        bg-image('./icon/star24_half')
      &.off
        bg-image('./icon/star24_off')
</style>